<template>
  <div class="peoperty-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-leabel">企业名称：</span>
      <el-input
        v-model="params.enterpriseName"
        clearable
        placeholder="请输入企业名称"
        class="search-main"
      />
      <span class="search-time">缴费时间：</span>
      <el-date-picker
        v-model="createTime"
        value-format="yyyy-MM-dd"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button
        type="primary"
        class="search-btn"
        @click="doSearch"
      >查询</el-button>
    </div>
    <!-- 新增区域 -->
    <div class="create-container">
      <el-button type="primary" @click="addz">添加账单</el-button>
      <!-- 添加账单弹窗 -->
      <el-dialog
        :title="'添加账单'"
        :visible.sync="dialogVisible"
        width="600px"
        @close="closeDialog"
        @open="openDialog"
      >
        <!-- 表单接口 -->
        <div class="form-container">
          <el-form ref="addForm" class="addform" :model="addForm" :rules="addFormRules">
            <span class="title-container">选择租户</span>
            <el-form-item prop="nameList">
              <el-select v-model="addForm.enterpriseId" placeholder="请选择租户" @focus="getAllEnterpriseList">
                <el-option
                  v-for="item in EnterpriseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <span class="title-container">租赁楼宇</span>
            <el-form-item prop="buildingId">
              <el-select v-model="addForm.buildingId" placeholder="请选择租赁楼宇">
                <el-option
                  v-for="item in buildingList"
                  :key="item.id"
                  :label="item.buildingname"
                  :value="item.buildingnameId"
                />
              </el-select>
            </el-form-item>
            <span class="title-container">缴费时间</span>
            <el-form-item>
              <el-date-picker
                v-model="addForm.createTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <span class="title-container">支付金额</span>
            <el-form-item prop="paymentAmount">
              <el-input v-model="addForm.paymentAmount" disabled placeholder="请输入支付金额" />
            </el-form-item>
            <span class="title-container">支付方式</span>
            <el-form-item prop="paymentMethod">
              <el-select v-model="addForm.paymentMethod" placeholder="请选择支付方式">
                <el-option
                  v-for="item in paywayList"
                  :key="item.id"
                  :label="item.payway"
                  :value="item.paywayId"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="confirmAdd">确 定</el-button>
        </template>
      </el-dialog>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table
        style="width:100%"
        :data="propertyList"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column label="账单编号" prop="billNumber" />
        <el-table-column label="企业名称" prop="enterpriseName" />
        <el-table-column label="租赁楼宇" prop="buildingName" />
        <el-table-column label="物业费(元/㎡)" prop="propertyFeePrice" />
        <el-table-column label="账单(元)" prop="paymentAmount" />
        <el-table-column label="缴费时间" prop="createTime" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini" type="text" @click="edit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="view(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
        :page-size="params.pageSize"
        :total="total"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>
<script>
import { getpropertyList, getAllEnterprise } from '@/api/property'
export default {
  data() {
    return {
      createTime: ['', ''],
      total: 0,
      propertyList: [], // 物业缴费成员列表
      EnterpriseList: '',
      addForm: {
        enterpriseId: '',
        buildingId: '',
        paymentAmount: '',
        paymentMethod: ''
      },
      params: {
        page: 1,
        pageSize: 10,
        enterpriseName: null
        // start: this.createTime[0],
        // end: this.createTime[1]
        // 每页显示条数(页码) 默认10条记录
      },
      dialogVisible: false // 创建账单的对话框显示状态, 可以选择显示或隐藏.
    }
  },
  mounted() {
    this.getProperties() // 请求物业缴费成员列表数据
  },
  methods: {
    async getAllEnterpriseList() {
      const res = await getAllEnterprise()
      console.log(res.data)
      this.EnterpriseList = res.data
      console.log(this.nameList)
    },
    doSearch() {
      this.params.page = 1
      console.log('doSearch')
      this.getProperties()
    },
    // 打开弹窗
    addz() {
      this.dialogVisible = true
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
    },
    async getProperties() { // 获取物业缴费成员列表. 回答数据操作对象请求。
      const res = await getpropertyList(this.params)
      console.log(res)
      this.propertyList = res.data.rows
      this.total = res.data.total
    },
    // 分页器
    pageChange(page) {
      this.params.page = page // 更改页码参数. 也可以使用el-input的值传递功能.
      this.getProperties(this.params) // 重新获取物业缴费成员列表数据. 回答数据操作对象
    }
  }
}
</script>
<style lang="scss" scoped>
.peoperty-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn {
    margin-left: 20px;
  }
}
.create-container {
  margin: 10px 0px;
}
.page-container {
  padding: 4px 0px;
  text-align: right;
}
.form-container {
  padding: 0px 80px;
}
.title-container{
  display: block;
  margin-bottom: 10px;
}
</style>
